<template>
  <div class="search">
    <div class="wrapper">
      <div class="topSearch">
        <span class="iconfont topSearch__icon">&#xeace;</span>
        <input @change="handleSearch" type="text" class="topSearch__inp" />
        <div class="topSearch__txt" @click="onCancel">取消</div>
      </div>
      <div class="area history" v-if="historyList.length">
        <div class="area__top">
          <div class="area__top__left">搜索历史</div>
          <div class="area__top__right" @click="clearHistory">清除搜索历史</div>
        </div>
        <ul class="area__list">
          <li
            class="area__list__item"
            v-for="(item, index) in historyList"
            :key="index"
            @click="() => goToSearch(item)"
          >
            {{ item }}
          </li>
        </ul>
      </div>
      <div class="area hotSearch">
        <div class="area__top">
          <div class="area__top__left">热门搜索</div>
        </div>
        <ul class="area__list">
          <li
            class="area__list__item"
            v-for="(item, index) in hotWordsList"
            :key="index"
          >
            尖椒肉丝
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
const HISTORY_KEY = "history";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { get } from "@/API/axios.js";

const useHotWordsEffect = () => {
  const hotWordsList = ref([]);
  const getHotWordsList = async () => {
    const res = await get("/api/shop/search/hot-words");
    if (res.errno === 1) {
      hotWordsList.value = res.data;
    }
  };

  return { hotWordsList, getHotWordsList };
};

export default {
  name: "search",
  setup() {
    //初始化路由
    const router = useRouter();
    //基础数据
    let historyList = ref(
      JSON.parse(localStorage.getItem(HISTORY_KEY) || "[]")
    );
    //处理搜索数据
    const handleSearch = (e) => {
      if (!e.target.value) return;
      const searchVal = e.target.value;
      const hasValue = historyList.value.find((item) => item === searchVal);
      if (!hasValue) {
        historyList.value.push(searchVal);
        localStorage.setItem(HISTORY_KEY, JSON.stringify(historyList.value));
      }
      router.push(`/searchList?keywords=${searchVal}`);
      e.target.value = "";
    };
    //处理清空
    const clearHistory = () => {
      historyList.value = [];
      localStorage.setItem(HISTORY_KEY, []);
    };

    //处理返回
    const onCancel = () => {
      router.back();
    };
    //跳转搜索
    const goToSearch = (keyword) => {
      router.push(`/searchList?keywords=${keyword}`);
    };

    //hotWordsList
    const { hotWordsList, getHotWordsList } = useHotWordsEffect();
    // getHotWordsList();
    return {
      hotWordsList,
      handleSearch,
      historyList,
      clearHistory,
      onCancel,
      goToSearch,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

.topSearch {
  box-sizing: border-box;
  position: relative;
  margin-top: 0.16rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  &__icon {
    position: absolute;
    top: 50%;
    left: 0.16rem;
    transform: translate3d(0, -45%, 0);
    color: #b7b7b7;
    font-size: 0.22rem;
  }
  &__inp {
    box-sizing: border-box;
    width: 2.95rem;
    height: 0.32rem;
    border-radius: 0.16rem;
    border: none;
    outline: none;
    background-color: $searchBgc-color;
    padding: 0 0.16rem 0 0.45rem;
    font-size: 0.14rem;
    color: $content-color;
    line-height: 0.16rem;
  }
  &__txt {
    font-size: 0.16rem;
    color: $content-color;
    line-height: 0.16rem;
  }
}

.area {
  &__top {
    width: 100%;
    height: 0.22rem;
    margin-top: 0.24rem;
    margin-bottom: 0.12rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &__left {
      font-size: 0.16rem;
      color: $content-color;
    }
    &__right {
      font-size: 0.14rem;
      color: $content-color;
    }
  }
  &__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    &__item {
      height: 0.32rem;
      margin-right: 0.1rem;
      margin-bottom: 0.1rem;
      padding: 0.08rem;
      border-radius: 0.02rem;
      font-size: 0.14rem;
      color: $medium-font-color;
      line-height: 0.16rem;
      background-color: $searchBgc-color;
    }
  }
}
</style>
